<template>
  <div class="form-page news-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px"
        ></span>
        推送信息
      </p>
      <p slot="extra" style="color: #999; font-size: 12px">
        <label style="color: #ff3b30">*</label> 为必填
      </p>
      <Form
        ref="formModel"
        :rules="ruleValidate"
        :model="bloc.form"
        :label-width="150"
        label-position="right"
      >
        <div class="title-tips">编辑消息内容</div>
        <FormItem label="消息标题:" prop="title" required>
          <Input
            type="text"
            v-model="bloc.form.memberId"
            placeholder="请填写消息标题"
            style="width: 400px; height: 40px"
          />
        </FormItem>

      </Form>
      <div style="margin: 20px 0px 35px 25px">
        <router-link :to="{ path: '/signlog' }">
          <Button style="width: 100px; height: 40px">返回</Button>
        </router-link>
        <Button
          type="primary"
          style="margin-left: 30px; width: 100px; height: 40px"
          @click="handleOk('formModel')"
          :loading="btnload.loading"
          :disabled="bloc.isDetail"
        >保存
        </Button>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import { Route } from "vue-router";
    import { FormBloc } from "@/view/signlog/FormBloc";
    import { baseUrl } from "@/base/Request";
    import { store } from "@/store/Store";
    import { Loading } from "@/base/Loading";
    import { isEmpty } from "@/base/util/Strings";
    import { getValidateHttp, getValidateMaxString } from "@/base/util/Validate";

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc.isDetail = vm.$route.query.detail === "1";
                if (!vm.isAdd) vm.bloc.load(vm.idx);
            });
        }

        get isAdd() {
            return !this.idx;
        }

        get idx() {
            return Number(this.$route.params.id);
        }

        // get uploadAction() {
        //     return `${baseUrl}/api/upload/image`;
        // }
        //
        // get uploadHeaders() {
        //     return {
        //         Authorization: "Bearer " + store.state.auth.accessToken,
        //     };
        // }

        bloc: FormBloc = new FormBloc();
        btnload = new Loading();
        imgUrl = "";
        visible = false;
        ruleValidate = {

        };

        handleView(url) {
            this.imgUrl = url;
            this.visible = true;
        }


        handleCancel() {
            this.$router.push({ path: `/signlog` });
            sessionStorage.removeItem("SIGN_LOG");
            // sessionStorage.getItem('MEMBER_INFO')
        }

        handleOk(name) {
            // if (this.bloc.form.pushType === 'TIMING' && isEmpty(this.bloc.form.pushTime)) {
            //   this.$Message.error('推送时间不能为空');
            //   return;
            // }
            const formRef: any = this.$refs[name];
            formRef.validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.saveFn();
                }
            });
        }

        saveFn() {
            this.btnload.loading = true;
            // this.bloc.form.pushType = "REAL_TIME";
            this.bloc.form.created = new Date() + "";
            // if (this.bloc.form.pushType === 'REAL_TIME') this.bloc.form.pushTime = new Date() + '';
            const parmas = this.isAdd ? "" : this.idx;
            this.bloc
                .save(parmas)
                .then((res) => {
                    this.$Message.success("保存成功");
                    this.btnload.loading = false;
                    this.handleCancel();
                })
                .catch((err) => {
                    this.btnload.loading = false;
                    this.$Message.error("保存失败");
                    console.log("出错啦::::", err);
                });
        }
    }
</script>

<style lang="less" scoped>
  .mar-left {
    margin-left: 15px;
  }
  .title-tips {
    font-weight: bolder;
    margin-bottom: 20px;
    text-align: left;
    &:before {
      content: "|";
      width: 4px;
      height: 10px;
      color: #2d8cf0;
      background: #2d8cf0;
      margin-right: 10px;
    }
  }
</style>
